<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>
<body>
<div id="vue9">

    <div id="div1">
        <button v-on:click="sendRequest">请求</button><br>
        <form>
            <input v-model="username" type="text" name="username" placeholder="请输入用户名">
            <input v-model="password" type="password" name="password" placeholder="请输入密码">
            <button v-on:click.prevent="sendpost">post请求</button>
        </form>
    </div>


</div>
<script type="text/javascript">
    var case8Demo=new Vue({
        el:"#vue9",
        data:{
            username: "",
            password:""
        },
        methods:{
            sendRequest:()=>{
                axios
                    .get("data.json")
                    .then(response=>(console.log(response.data)))
                    .catch(function (error) {//请求失败处理
                        console.log(error)
                    })
            },
            sendpost:()=>{
                axios.post("http://localhost:2020/login",{
                    username:this.username,
                    password: this.password
                }) .then(response=>(console.log(response.data)))
                   .catch(function (error) {//请求失败处理
                        console.log(error)
                    })
            }
        }
    })
</script>
</body>
</html>